<template>
    <div class="zhuanti">
        <div class="zhuantiBox" v-for="(item,index) in topicArr" :key="index">
            <img v-lazy="item.scene_pic_url" alt="" />
            <div class="title">{{item.title}}</div>
            <div class="tip">{{item.subtitle}}</div>
            <div class="price">{{item.price_info|RMB}}</div>
        </div>
        <van-pagination v-model="page" :page-count="totalPages" :show-page-size="0"  @change="pageChange" id="van-pagination"/>
    </div>
</template>

<script>
    import {
        TopicApi
    } from '../request/api'
    export default {
        data() {
            return {
                page: 1,
                size: 10,
                topicArr: [],
                totalPages: 2,
            }

        },
        created() {
            this.pageChange()
        },
        methods: {


            pageChange() {
                // console.log(this.page);
                TopicApi({
                    page: this.page,
                    size: this.size
                }).then(res => {
                    console.log(res);
                    if (res.errno == 0) {
                        this.topicArr = res.data.data
                        console.log(this.topicArr);
                        this.totalPages = res.data.totalPages;
                    }
                })
                scrollTo(0, 0);
            }
        }
    }
</script>

<style lang="less">

    .zhuanti {
        padding-bottom: 100px;

            .van-pagination__item {
      color: darkred;
    }

    .van-pagination__item--disabled {
      color: #333;
    }

        .zhuantiBox {
            background-color: #fff;
            text-align: center;
            padding-bottom: 10px;
            margin-bottom: 20px;

            img {
                width: 100%;
                display: block;
            }

            .title {
                font-size: 18px;
                margin: 10px 0;
            }

            .tip {
                font-size: 16px;
                margin: 18px 0;
                color: #1f1f1f;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .price {
                color: #9b0000;
                margin-bottom: 10px;
                font-size: 14px;
            }
        }
    }
</style>